<template>
  <div>
    <div v-show="timingPage" class="timingStrategy">
      <sending-timing v-bind:addSendingAccounts="addSendingAccounts" v-on:needShowData="needShowData"></sending-timing>
    </div>
    <div v-show="editTimingPage" class="editTimingStrategy">
      <div class="editTimingStrategy">
        <div class="timingHeader">
          <div class="timingDialog">
            <span class="timingTitle">编辑定时策略</span>
            <el-button class="timingButton" @click="returntimming()"><i class="el-icon-arrow-left"></i>返回上一级</el-button>
          </div>
          <el-form :inline="true" class="demo-form-inline">
            <span class="policySpan">*</span>
            <el-form-item class="policyLabel" label="策略名称:">
              <el-input class="policyInput" v-model="editTimingData.name" ></el-input>
            </el-form-item>
          </el-form>
          <el-steps :active="timingStep" finish-status="success" simple simple style="margin-top: 20px">
            <el-step title="1.选择事件源" icon="el-icon-edit"></el-step>
            <el-step title="2.选择发送时间" icon="el-icon-upload"></el-step>
            <el-step title="3.选择接收人" icon="el-icon-picture"></el-step>
          </el-steps>
        </div>
        <div class="timingBody">
          <div v-if="timingStep == 1" class="timingTree">
            <el-tree
              :data="addRealTimeTreeData"
              :props="defaultProps"
              show-checkbox
              node-key="resource_id"
              ref="tree"
              :default-expand-all="true"
              @check-change="editTimingNodeClick">
            </el-tree>
          </div>
          <div v-if="timingStep == 2" >
            <el-table class="timingTable" :data="editTimingSafeTime">
              <el-table-column class="timingPadding" width="380px" prop="name">
                <template slot-scope="scope">
                  <div class="timeContent">
                    <span class="timeLable">发送时间{{scope.$index + 1}}:</span>
                    <el-time-picker
                      class="timeInput"
                      v-model="editTimingSafeTime[scope.$index]"
                      value-format="HH:mm" format="HH:mm"
                      placeholder="任意时间点">
                    </el-time-picker>
                  </div>
                </template>
              </el-table-column>
              <el-table-column class="timingPadding">
                <template  slot-scope="scope">
                  <el-button v-if="scope.$index < 7" class="tableIcon" title="添加" type="text" size="small" @click="timingAddTime(scope.$index)">
                    <i class="el-icon-plus"></i>
                  </el-button>
                  <el-button v-if="scope.$index > 0" class="tableIcon" title="删除" type="text" size="small" @click="timingDeleteRow(scope.$index)">
                    <i class="el-icon-minus"></i>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-if="timingStep == 3">
            <el-row class="tableTransfer">
              <el-col :span="11" class="transferLeft">
                <div class="leftTableTop">
                  <span>未选接收人</span>
                  <!--<div class="searchBox">-->
                  <!--<el-input class="leftInput" v-model="editLeftSearch" placeholder="搜索"></el-input><i class="el-icon-search search"></i>-->
                  <!--</div>-->
                </div>
                <div class="leftTable">
                  <el-table
                    :data="editLeftTableData"
                    stripe
                    :header-cell-style="{background:'#F7F8F9',height: '20px',padding:'3px 0px 2px 0px'}"
                    height="330"
                    @selection-change="editLeftChangeFun"
                    style="width: 100%">
                    <el-table-column
                      type="selection"
                      align="center"
                      width="40"
                      @selection-change="editLeftChangeFun">
                    </el-table-column>
                    <el-table-column
                      prop="account"
                      label="账号"
                      width="150">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="姓名"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      prop="mobile"
                      label="手机">
                    </el-table-column>
                  </el-table>
                </div>
                <!--<div class="block">-->
                <!--<el-pagination-->
                <!--@size-change="leftSizeChange"-->
                <!--@current-change="leftCurrentChange"-->
                <!--:current-page="leftPage"-->
                <!--:page-sizes="[5, 10, 20]"-->
                <!--:page-size="10"-->
                <!--layout="total, sizes, prev, pager, next"-->
                <!--:total="10">-->
                <!--</el-pagination>-->
                <!--</div>-->
              </el-col>
              <el-col :span="2" class="transferMiddle">
                <div>
                  <el-button type="primary" @click="editRightToLeft"><i class="el-icon-arrow-left"></i></el-button>
                  <el-button type="primary" @click="editLeftToRight"><i class="el-icon-arrow-right"></i></el-button>
                </div>
              </el-col>
              <el-col :span="11" class="transferRight">
                <div class="rightTableTop">
                  <span>已选接收人</span>
                  <!--<div class="searchBox">-->
                  <!--<el-input class="leftInput" v-model="rightSearch" placeholder="搜索"></el-input><i class="el-icon-search search"></i>-->
                  <!--</div>-->
                </div>
                <div class="rightTable">
                  <el-table
                    :data="editRightTableData"
                    stripe
                    :header-cell-style="{background:'#F7F8F9',height: '20px',padding:'3px 0px 2px 0px'}"
                    height="330"
                    @selection-change="editRightChangeFun"
                    style="width: 100%">
                    <el-table-column
                      type="selection"
                      align="center"
                      width="40"
                      @selection-change="editRightChangeFun">
                    </el-table-column>
                    <el-table-column
                      prop="account"
                      label="账号"
                      width="150">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="姓名"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      prop="mobile"
                      label="手机">
                    </el-table-column>
                  </el-table>
                </div>
                <!--<div class="block">-->
                <!--<el-pagination-->
                <!--@size-change="rightSizeChange"-->
                <!--@current-change="rightCurrentChange"-->
                <!--:current-page="rightPage"-->
                <!--:page-sizes="[5, 10, 20]"-->
                <!--:page-size="10"-->
                <!--layout="total, sizes, prev, pager, next"-->
                <!--:total="10">-->
                <!--</el-pagination>-->
                <!--</div>-->
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="timingFooter">
          <div class="footerBtn">
            <el-button v-if="timingStep == 3" type="primary" @click="editTimingComplete()">保存</el-button>
            <el-button v-if="timingStep == 1 || timingStep == 2" type="primary" @click="timingNext()">下一步</el-button>
            <el-button v-if="timingStep == 2 || timingStep == 3" type="primary" @click="timingLast()">上一步</el-button>
          </div>
        </div>
      </div>
    </div>
    <div v-show="realTimePage" class="realTimeStrategy">
      <div class="realTimePage">
        <div class="pageHeader">
          <div class="headerTitle clearfix">
            <h3>新增实时策略</h3>
            <span class="returnSending" @click="returnSending()"> < 返回上一级</span>
          </div>
          <div class="headerInput">
            <i>*</i>策略名称：<el-input v-model='addRealTimeName' placeholder="请输入内容"></el-input>
          </div>
          <div class="headerSteps">
            <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
              <el-step title="1.选择事件源" ></el-step>
              <el-step title="2.选择发送等级" ></el-step>
              <el-step title="3.选择接收人" ></el-step>
            </el-steps>
          </div>
        </div>
        <div class="pageContent">
          <div v-if="active == 1" class="contentTree">
            <el-tree
              :data="addRealTimeTreeData"
              :props="defaultProps"
              show-checkbox
              :default-expand-all="true"
              node-key="resource_id"
              ref="treee"
              @check-change="realTimeNodeClick"></el-tree>
          </div>
          <div v-if="active == 2" class="contentTransfer">
            <div class="realTimeTransfer">
              <el-transfer
                v-model="value2"
                :props="{key: 'value',label: 'label'}"
                :titles="['等级列表', '已选列表']"
                :data="addRealTimeEvent">
              </el-transfer>
            </div>
          </div>
          <div v-if="active == 3">
            <el-row class="tableTransfer">
              <el-col :span="11" class="transferLeft">
                <div class="leftTableTop">
                  <span>未选接收人</span>
                  <!--<div class="searchBox">-->
                  <!--<el-input class="leftInput" v-model="leftSearch" placeholder="搜索"></el-input><i class="el-icon-search search"></i>-->
                  <!--</div>-->
                </div>
                <div class="leftTable">
                  <el-table
                    :data="leftTableData"
                    stripe
                    :header-cell-style="{background:'#F7F8F9',height: '20px',padding:'3px 0px 2px 0px'}"
                    height="330"
                    @selection-change="leftChangeFun"
                    style="width: 100%">
                    <el-table-column
                      type="selection"
                      align="center"
                      width="40"
                      @selection-change="leftChangeFun">
                    </el-table-column>
                    <el-table-column
                      prop="account"
                      label="账号"
                      width="150">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="姓名"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      prop="mobile"
                      label="手机">
                    </el-table-column>
                  </el-table>
                </div>
                <!--<div class="block">-->
                <!--<el-pagination-->
                <!--@size-change="leftSizeChange"-->
                <!--@current-change="leftCurrentChange"-->
                <!--:current-page="leftPage"-->
                <!--:page-sizes="[5, 10, 20]"-->
                <!--:page-size="10"-->
                <!--layout="total, sizes, prev, pager, next"-->
                <!--:total="10">-->
                <!--</el-pagination>-->
                <!--</div>-->
              </el-col>
              <el-col :span="2" class="transferMiddle">
                <div>
                  <el-button type="primary" @click="rightToLeft"><i class="el-icon-arrow-left"></i></el-button>
                  <el-button type="primary" @click="leftToRight"><i class="el-icon-arrow-right"></i></el-button>
                </div>
              </el-col>
              <el-col :span="11" class="transferRight">
                <div class="rightTableTop">
                  <span>已选接收人</span>
                  <!--<div class="searchBox">-->
                  <!--<el-input class="leftInput" v-model="rightSearch" placeholder="搜索"></el-input><i class="el-icon-search search"></i>-->
                  <!--</div>-->
                </div>
                <div class="rightTable">
                  <el-table
                    :data="rightTableData"
                    stripe
                    :header-cell-style="{background:'#F7F8F9',height: '20px',padding:'3px 0px 2px 0px'}"
                    height="330"
                    @selection-change="rightChangeFun"
                    style="width: 100%">
                    <el-table-column
                      type="selection"
                      align="center"
                      width="40"
                      @selection-change="rightChangeFun">
                    </el-table-column>
                    <el-table-column
                      prop="account"
                      label="账号"
                      width="150">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="姓名"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      prop="mobile"
                      label="手机">
                    </el-table-column>
                  </el-table>
                </div>
                <!--<div class="block">-->
                <!--<el-pagination-->
                <!--@size-change="rightSizeChange"-->
                <!--@current-change="rightCurrentChange"-->
                <!--:current-page="rightPage"-->
                <!--:page-sizes="[5, 10, 20]"-->
                <!--:page-size="10"-->
                <!--layout="total, sizes, prev, pager, next"-->
                <!--:total="10">-->
                <!--</el-pagination>-->
                <!--</div>-->
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="pageFooter">
          <div v-if="active == 1" class="footerBtn">
            <el-button type="primary" @click="next()">下一步</el-button>
          </div>
          <div v-if="active == 2" class="footerBtnSecond">
            <el-button type="primary" @click="next()">下一步</el-button>
            <el-button type="primary" @click="previous()">上一步</el-button>
          </div>
          <div v-if="active == 3" class="footerBtnSecond">
            <el-button type="primary" @click="addRealTime()">保存</el-button>
            <el-button type="primary" @click="previous()">上一步</el-button>
          </div>
        </div>
      </div>
    </div>
    <div v-show="editRealTimePage" class="editRealTimeStrategy">
      <div class="realTimePage">
        <div class="pageHeader">
          <div class="headerTitle clearfix">
            <h3>编辑实时策略</h3>
            <span class="returnSending" @click="returnSending()">< 返回上一级</span>
          </div>
          <div class="headerInput">
            <i>*</i>策略名称：<el-input v-model='editRealTimeData.name' placeholder="请输入内容"></el-input>
          </div>
          <div class="headerSteps">
            <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
              <el-step title="1.选择事件源" ></el-step>
              <el-step title="2.选择发送等级" ></el-step>
              <el-step title="3.选择接收人" ></el-step>
            </el-steps>
          </div>
        </div>
        <div class="pageContent">
          <div v-if="active == 1" class="contentTree">
            <el-tree
              :data="addRealTimeTreeData"
              :props="defaultProps" show-checkbox
              node-key="resource_id"
              ref="editTree"
              :default-expand-all="true"
              @check-change="editRealTimeNodeClick"></el-tree>
          </div>
          <div v-if="active == 2" class="contentTransfer">
            <div class="realTimeTransfer">
              <el-transfer
                v-model="editRealTimeData.event_level_value"
                :props="{key: 'value',label: 'label'}"
                :titles="['等级列表', '已选列表']"
                :data="addRealTimeEvent">
              </el-transfer>
            </div>
          </div>
          <div v-if="active == 3">
            <el-row class="tableTransfer">
              <el-col :span="11" class="transferLeft">
                <div class="leftTableTop">
                  <span>未选接收人</span>
                  <!--<div class="searchBox">-->
                  <!--<el-input class="leftInput" v-model="editLeftSearch" placeholder="搜索"></el-input><i class="el-icon-search search"></i>-->
                  <!--</div>-->
                </div>
                <div class="leftTable">
                  <el-table
                    :data="editLeftTableData"
                    stripe
                    height="330"
                    :header-cell-style="{background:'#F7F8F9',height: '20px',padding:'3px 0px 2px 0px'}"
                    @selection-change="editLeftChangeFun"
                    style="width: 100%">
                    <el-table-column
                      type="selection"
                      align="center"
                      width="40"
                      @selection-change="editLeftChangeFun">
                    </el-table-column>
                    <el-table-column
                      prop="account"
                      label="账号"
                      width="150">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="姓名"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      prop="mobile"
                      label="手机">
                    </el-table-column>
                  </el-table>
                </div>
                <!--<div class="block">-->
                <!--<el-pagination-->
                <!--@size-change="leftSizeChange"-->
                <!--@current-change="leftCurrentChange"-->
                <!--:current-page="leftPage"-->
                <!--:page-sizes="[5, 10, 20]"-->
                <!--:page-size="10"-->
                <!--layout="total, sizes, prev, pager, next"-->
                <!--:total="10">-->
                <!--</el-pagination>-->
                <!--</div>-->
              </el-col>
              <el-col :span="2" class="transferMiddle">
                <div>
                  <el-button type="primary" @click="editRightToLeft"><i class="el-icon-arrow-left"></i></el-button>
                  <el-button type="primary" @click="editLeftToRight"><i class="el-icon-arrow-right"></i></el-button>
                </div>
              </el-col>
              <el-col :span="11" class="transferRight">
                <div class="rightTableTop">
                  <span>已选接收人</span>
                  <!--<div class="searchBox">-->
                  <!--<el-input class="leftInput" v-model="rightSearch" placeholder="搜索"></el-input><i class="el-icon-search search"></i>-->
                  <!--</div>-->
                </div>
                <div class="rightTable">
                  <el-table
                    :data="editRightTableData"
                    stripe
                    height="330"
                    :header-cell-style="{background:'#F7F8F9',height: '20px',padding:'3px 0px 2px 0px'}"
                    @selection-change="editRightChangeFun"
                    style="width: 100%">
                    <el-table-column
                      type="selection"
                      align="center"
                      width="40"
                      @selection-change="editRightChangeFun">
                    </el-table-column>
                    <el-table-column
                      prop="account"
                      label="账号"
                      width="150">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="姓名"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      prop="mobile"
                      label="手机">
                    </el-table-column>
                  </el-table>
                </div>
                <!--<div class="block">-->
                <!--<el-pagination-->
                <!--@size-change="rightSizeChange"-->
                <!--@current-change="rightCurrentChange"-->
                <!--:current-page="rightPage"-->
                <!--:page-sizes="[5, 10, 20]"-->
                <!--:page-size="10"-->
                <!--layout="total, sizes, prev, pager, next"-->
                <!--:total="10">-->
                <!--</el-pagination>-->
                <!--</div>-->
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="pageFooter">
          <div v-if="active == 1" class="footerBtn">
            <el-button type="primary" @click="next()">下一步</el-button>
          </div>
          <div v-if="active == 2" class="footerBtnSecond">
            <el-button type="primary" @click="next()">下一步</el-button>
            <el-button type="primary" @click="previous()">上一步</el-button>
          </div>
          <div v-if="active == 3" class="footerBtnSecond">
            <el-button type="primary" @click="editRealTime()">保存</el-button>
            <el-button type="primary" @click="previous()">上一步</el-button>
          </div>
        </div>
      </div>
    </div>
    <div v-show="sendingPage" class="sending-containner">
      <el-dialog
        title="提示"
        :visible.sync="dialogDisable"
        width="540px"
        class="sendingDisableDialog"
        style="margin-top: 20vh;">
        <div style="width: 100%; text-align: center; height: 100px; padding-top: 35px;">
          <img :src="disableIcon"/>
        </div>
        <span>确认禁用此策略</span>
        <span slot="footer" class="dialog-footer">
          <el-button class="clears" @click="dialogDisable = false">取 消</el-button>
          <el-button type="primary" style="float: right" @click="showDisable()">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="提示"
        :visible.sync="dialogEnable"
        width="540px"
        class="sendingDisableDialog"
        style="margin-top: 20vh;">
        <div style="width: 100%; text-align: center; height: 100px; padding-top: 35px;">
          <img :src="enableIcon"/>
        </div>
        <span>确认启用此策略</span>
        <span slot="footer" class="dialog-footer">
          <el-button class="clears" @click="dialogEnable = false">取 消</el-button>
          <el-button type="primary" style="float: right" @click="showEnable()">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="查看" :visible.sync="dialogSafeLook">
        <el-form class="safelook" :model="lookSendingData" label-width="101px">
          <el-form-item class="lookLabel" label="安全策略名称:">
            <el-input class="lookInput" v-model="lookSendingData.name" readonly></el-input>
          </el-form-item>
          <el-form-item class="lookLabel" label="创建时间:">
            <el-input class="lookInput" v-model="lookSendingData.create_time" readonly></el-input>
          </el-form-item>
          <el-form-item class="lookLabel" label="设备&测点:">
            <el-input class="lookInput" v-model="lookSendingData.equip" readonly></el-input>
          </el-form-item>
          <el-form-item class="lookLabel" label="级别:">
            <el-input class="lookInput" v-model="lookSendingData.event_level" readonly></el-input>
          </el-form-item>
          <el-form-item class="lookLabel" label="策略类型:">
            <el-input class="lookInput" v-model="lookSendingData.type" readonly></el-input>
          </el-form-item>
          <el-form-item class="lookLabel" label="发送时间:">
            <el-input class="lookInput" v-model="lookSendingData.timing" readonly></el-input>
          </el-form-item>
          <el-form-item class="lookLabel" label="接收人:">
            <el-input class="lookInput" v-model="lookSendingData.user" readonly></el-input>
          </el-form-item>
          <el-form-item label="状态:" v-if="lookSendingData.status === '启用'">
            <el-input class="lookInput enableColor" v-model="lookSendingData.status" readonly></el-input>
          </el-form-item>
          <el-form-item label="状态:" v-if="lookSendingData.status === '禁用'">
            <el-input class="lookInput disabledColor" v-model="lookSendingData.status" readonly></el-input>
          </el-form-item>
        </el-form>
      </el-dialog>
      <div class="safeSearch">
        <header-search v-bind:deleteStrategys="deleteStrategys" v-on:needShowData="needShowData" v-on:strategySearch="strategySearch"></header-search>
      </div>
      <div class="safeTableList">
        <div class="pagination-container footerPage">
          <el-pagination
            :current-page="ListQuery.page"
            :page-sizes="[5, 10, 20]"
            :page-size="ListQuery.limit"
            background layout="total, sizes, prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
        <el-table
          :data="overStrategyData"
          stripe fit highlight-current-row
          style="width: 100%;overflow-y: auto; "
          height="560px"
          :header-cell-style="{background:'#F7F8F9',height: '20px',padding:'3px 0px 2px 0px'}"
          @selection-change="sendingChangeFun">
          <el-table-column type="selection" align="center" width="40" @selection-change="sendingChangeFun"></el-table-column>
          <el-table-column
            prop="index"
            align="center"
            label="序号"
            width="60px"
          >
          </el-table-column>
          <el-table-column
            v-for="(column, index) in colsss"
            :prop="column.prop"
            :label="column.label"
            :key="index"
            :width="column.width"
            :sortable="column.sortable"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="65px"
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status === '启用' ? 'primary' : 'success'"
                disable-transitions>{{scope.row.status}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            type="index"
            label="操作"
            width="230px"
          >
            <template slot-scope="scope">
              <el-button class="tableIcon" title="查看" @click="lookSending(scope.$index,scope.row)" type="text" size="small">
                <img :src="viewIcon"/>
              </el-button>
              <el-button class="tableIcon" title="编辑" @click="editSending(scope.$index,scope.row)" type="text" size="small">
                <img :src="update"/>
              </el-button>
              <el-button class="tableIcon" title="删除" @click="deleteSendingDialog(scope.$index, scope.row)" type="text" size="small">
                <img :src="deletes"/>
              </el-button>
              <!--<safe-delete-dialog></safe-delete-dialog>-->
              <span class="segmentingLine">|</span>
              <el-button v-if="scope.row.status === '禁用'" @click="dialogOpenE(scope.$index, scope.row)" class="tableIcon" title="启用" type="text" size="small">
                <img :src="enable"/>
              </el-button>
              <el-button v-if="scope.row.status === '启用'" @click="dialogOpenD(scope.$index, scope.row)" class="tableIcon" title="禁用" type="text" size="small">
                <img :src="disable"/>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
  import headerSearch from './components/headerSearch'
  import realTimeTransfer from './components/realTimeTransfer'
  import SendingTiming from './components/sendingTiming'

  import enable from '@/assets/reports/enable_normal.png'
  import disable from '@/assets/reports/disabled_normal.png'
  import deletes from '@/assets/reports/delete_normal.png'
  import remove from '@/assets/mSiteAdmin/remove.png'
  import update from '@/assets/reports/redact_normal.png'
  import viewIcon from '@/assets/reports/detail_normal.png'
  import disableIcon from '@/assets/mSiteAdmin/disable-icon.png'
  import enableIcon from '@/assets/mSiteAdmin/enable-icon.png'
  import axios from 'axios'
  export default {
    components: { headerSearch, realTimeTransfer, SendingTiming },
    name: 'sendingStrategy',
    data() {
      return {
        value2: [],
        dialogDisable: false,
        dialogEnable: false,
        realTimePage: false,
        editRealTimePage: false,
        timingPage: false,
        editTimingPage: false,
        sendingPage: true,
        timingStep: 1,
        addSendingAccounts: [],
        timingSafeTime: [],
        editTimingSafeTime: [],
        editPolicyTop: {
          name: ''
        },
        enable,
        disable,
        deletes,
        remove,
        update,
        viewIcon,
        enableIcon,
        disableIcon,
        enabledState: {
          enabled: false,
          disabled: true
        },
        colsss: [
          { prop: 'name', label: '策略名称' },
          { prop: 'equip', label: '设备&测点', width: '400px' },
          { prop: 'event_level', label: '级别', width: '200px' },
          { prop: 'type', label: '策略类型', width: '110px', sortable: true },
          { prop: 'create_time', label: '创建时间', width: '160px' },
          { prop: 'user', label: '接收人', width: '200px' }
        ],
        ListQuery: {
          page: 1,
          limit: 10
        },
        total: 0,
        dialogSafeLook: false,
        formLabelWidth: '101px',
        formLabelWidth2: '50px',
        formLabelAlign: {
          name: '',
          equipment: '',
          safetime: '',
          status: '',
          type: ''
        },
        defaultProps: {
          label: 'name'
        },
        active: 1,
        addRealTimeName: '',
        leftTableData: [],
        editLeftTableData: [],
        rightTableData: [],
        editRightTableData: [],
        realTimeNeedTree: [],
        rightNeedData: [],
        leftNeedData: [],
        editRightNeedData: [],
        editLeftNeedData: [],
        leftPage: 1,
        rightPage: 1,
        leftSearch: '',
        editLeftSearch: '',
        rightSearch: '',
        editRightSearch: '',
        Pattern: '',
        addRealTimeTreeData: [],
        editTimingNeedTree: [],
        addRealTimeEvent: [],
        editTimingData: '',
        editRealTimeData: '',
        lookSendingData: {
          name: '',
          create_time: '',
          equip: '',
          event_level: '',
          type: '',
          timing: '',
          users: [],
          user: [],
          status: ''
        },
        deleteStrategys: [],
        overStrategyData: [],
        // 总览告警策略
        overStrategy: {
          access_token: localStorage.getItem('access_token'),
          type: 'strategy_condition',
          pid: localStorage.getItem('num'),
          data: {
            condition: {
              name: '',
              type: '',
              status: '',
              send_method: '',
              equip: '',
              user: '',
              user_name: '',
              event_level: '',
              timing: ''
            },
            page: {
              page_size: '10',
              page_number: '1'
            }
          }
        },
        // 新增告警策略
        addStrategy: {
          access_token: localStorage.getItem('access_token'),
          type: 'strategy_add',
          pid: localStorage.getItem('num'),
          data: {
            pid: localStorage.getItem('num'),
            name: '',
            status: 1,
            type: 0,
            event_level_value: [],
            send_method_value: [1],
            users: [],
            equip_value: ['1'],
            timing_value: []
          }
        },
        // 新增告警策略组织树
        addStrategyTree: {
          access_token: localStorage.getItem('access_token'),
          type: 'resource_getall',
          pid: localStorage.getItem('num'),
          ids: ['']
        },
        // 查看告警策略
        lookSendingBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'strategy_get_byid',
          pid: localStorage.getItem('num'),
          id: ''
        },
        // 删除告警策略
        deleteStrategyBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'strategy_del',
          pid: localStorage.getItem('num'),
          ids: []
        },
        // 编辑告警策略
        editStrategyBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'strategy_mod',
          pid: localStorage.getItem('num'),
          data: {
            id: '',
            pid: localStorage.getItem('num'),
            name: '',
            status: 1,
            type: 0,
            event_level_value: [],
            send_method_value: [1],
            users: [],
            equip_value: ['1'],
            timing_value: []
          }
        },
        // 新增告警策略告警级别
        addStrategyEvent: {
          access_token: localStorage.getItem('access_token'),
          type: 'event_type_get3'
        },
        // 启用告警策略
        strategyEnable: {
          access_token: localStorage.getItem('access_token'),
          type: 'strategy_enable',
          pid: localStorage.getItem('num'),
          ids: []
        },
        // 禁用告警策略
        strategyDisable: {
          access_token: localStorage.getItem('access_token'),
          type: 'strategy_disable',
          pid: localStorage.getItem('num'),
          ids: []
        },
        // 获取人员信息
        getAccountsBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'get_accounts',
          data: ''
        }
      }
    },
    created() {
      this.initialization()
      this.overSendingStrategy()
      this.getRealTimeTree()
      this.getStrategyEvent()
    },
    methods: {
      toJSON() {
      },
      // 总览发送策略
      overSendingStrategy() {
        this.realTimePage = false
        this.editRealTimePage = false
        this.timingPage = false
        this.sendingPage = true
        let httpStr = process.env.SERVER_URL_ALARM_SERVICE
        axios.post(httpStr + '/strategy', this.overStrategy, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.overStrategyData = res.data.data.items
          for (let a = 0; a < res.data.data.items.length; a++) {
            this.overStrategyData[a].index = (a + 1) + (res.data.data.page.page_number - 1) * res.data.data.page.page_size
          }
          this.total = Number(res.data.data.page.total)
          for (let i = 0; i < this.overStrategyData.length; i++) {
            if (this.overStrategyData[i].status === 0) {
              this.overStrategyData[i].status = '禁用'
            } else {
              this.overStrategyData[i].status = '启用'
            }
            if (this.overStrategyData[i].event_level_value === null) {
              this.overStrategyData[i].event_level = '--'
            }
            if (this.overStrategyData[i].type === 0) {
              this.overStrategyData[i].type = '实时'
            } else {
              this.overStrategyData[i].type = '定时'
            }
            var mlxg = []
            for (let q = 0; q < this.overStrategyData[i].users.length; q++) {
              mlxg.push(this.overStrategyData[i].users[q].name + ',')
              this.overStrategyData[i].user = mlxg
            }
          }
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 页码控制
      handleSizeChange(val) {
        var pageSize = val
        this.overStrategy.data.page.page_number = '1'
        this.overStrategy.data.page.page_size = String(pageSize)
        this.overSendingStrategy()
      },
      handleCurrentChange(val) {
        var pageNumber = val
        this.overStrategy.data.page.page_number = String(pageNumber)
        this.overSendingStrategy()
      },
      // 获取新增实时树
      getRealTimeTree() {
        axios.post('/project', this.addStrategyTree, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.addRealTimeTreeData = []
          this.addRealTimeTreeData.push(res.data.datas)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      getStrategyEvent() {
        axios.post('/project', this.addStrategyEvent, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.addRealTimeEvent = []
          this.addRealTimeEvent = (res.data.datas)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 新增操作
      addRealTime() {
        this.addStrategy.data.name = this.addRealTimeName
        this.addStrategy.data.event_level_value = this.value2
        this.addStrategy.data.equip_value = this.realTimeNeedTree
        for (let i = 0; i < this.rightTableData.length; i++) {
          this.rightTableData[i].pid = this.rightTableData[i].account
          this.rightTableData[i].post = this.rightTableData[i].role
        }
        this.addStrategy.data.users = this.rightTableData
        let httpStr = process.env.SERVER_URL_ALARM_SERVICE
        axios.post(httpStr + '/strategy', this.addStrategy, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.realTimeNeedTree = []
          this.realTimePage = false
          this.editRealTimePage = false
          this.timingPage = false
          this.sendingPage = true
          this.overSendingStrategy()
        })
          .catch((error) => {
            this.$message.error(error.data.errmsg)
            switch (error.data.errmsg) {
              case ' Name is not empty':
                this.$message.error('策略名称不能为空')
                break
              case 'name already exists':
                this.$message.error('当前策略名称已存在')
                break
              case 'Please select the event source.\t':
                this.$message.error('请选择事件源')
                break
              case 'Please select the user.\t':
                this.$message.error('请选择接收人')
                break
              case ' event level is not empty':
                this.$message.error('请选择发送级别')
                break
            }
          })
      },
      // 获取实时树勾选
      realTimeNodeClick() {
        console.log('获取: ' + this.$refs.treee.getCheckedKeys())
        this.realTimeNeedTree = this.$refs.treee.getCheckedKeys()
      },
      // 获取编辑实时树结构
      editRealTimeNodeClick() {
        this.editRealTimeData.equip_value = this.$refs.editTree.getCheckedKeys()
      },
      // 刷新初始化
      initialization() {
        this.realTimePage = false
        this.editRealTimePage = false
        this.timingPage = false
        this.sendingPage = true
      },
      // 树组织
      handleNodeClick(data) {
        console.log(data)
      },
      // 查看发送策略弹框
      lookSending(index, row) {
        this.lookSendingBody.id = row.id
        let httpStr = process.env.SERVER_URL_ALARM_SERVICE
        axios.post(httpStr + '/strategy', this.lookSendingBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.lookSendingBody.id = ''
          this.lookSendingData = (res.data.data)
          console.log(this.lookSendingData)
          var theshy = []
          for (let q = 0; q < this.lookSendingData.users.length; q++) {
            theshy.push(this.lookSendingData.users[q].name)
            console.log(theshy)
            this.lookSendingData.user = theshy
          }
          if (this.lookSendingData.type === 0) {
            this.lookSendingData.type = '实时'
          } else {
            this.lookSendingData.type = '定时'
          }
          if (this.lookSendingData.status === 0) {
            this.lookSendingData.status = '禁用'
          } else {
            this.lookSendingData.status = '启用'
          }
          if (this.lookSendingData.event_level_value === null) {
            this.lookSendingData.event_level = '--'
          }
          if (this.lookSendingData.timing_value === null) {
            this.lookSendingData.timing = '--'
          }
        })
          .catch(function(error) {
            console.log(error)
          })
        this.dialogSafeLook = true
      },
      // 返回总览
      returnSending() {
        this.realTimeNeedTree = ''
        if (this.active === 1) {
          this.$nextTick(function() {
            this.$refs.treee.setCheckedKeys(this.editTimingNeedTree)
          })
        }
        this.realTimePage = false
        this.editRealTimePage = false
        this.timingPage = false
        this.sendingPage = true
        this.active = 1
      },
      // 传值切换页面
      needShowData: function(showData) {
        this.active = 1
        this.realTimePage = showData.realTime
        this.timingPage = showData.timing
        this.sendingPage = showData.sending
        this.overStrategy.data.page.page_number = '1'
        if (this.realTimePage === true) {
          this.rightTableData = []
          this.addRealTimeName = ''
          this.value2 = []
          let httpStr = process.env.SERVER_URL_4A
          axios.post(httpStr + '/account', this.getAccountsBody, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            this.leftTableData = res.data.datas
          })
            .catch((error) => {
              console.log(error)
            })
        } else if (this.timingPage === true) {
          let httpStr = process.env.SERVER_URL_4A
          axios.post(httpStr + '/account', this.getAccountsBody, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            this.addSendingAccounts = res.data.datas
          })
            .catch((error) => {
              console.log(error)
            })
        }
        if (this.sendingPage === true) {
          this.overSendingStrategy()
        }
      },
      strategySearch: function(strategySearch) {
        this.overStrategy.data.page.page_number = '1'
        this.overStrategy.data.condition.name = strategySearch
        this.overSendingStrategy()
      },
      // 编辑发送策略
      editSending(index, row) {
        this.timingStep = 1
        this.active = 1
        if (row.type === '定时') {
          console.log('XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX')
          this.lookSendingBody.id = row.id
          let httpStr = process.env.SERVER_URL_ALARM_SERVICE
          axios.post(httpStr + '/strategy', this.lookSendingBody, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            console.log(res.data.data)
            this.editRightTableData = res.data.data.users
            for (let i = 0; i < this.editRightTableData.length; i++) {
              this.editRightTableData[i].account = this.editRightTableData[i].pid
            }
            this.lookSendingBody.id = ''
            this.editTimingNeedTree = res.data.data.equip_value
            this.$refs.tree.setCheckedKeys(this.editTimingNeedTree)
            this.editTimingPage = true
            this.sendingPage = false
            this.editTimingData = res.data.data
            this.editTimingSafeTime = this.editTimingData.timing_value
            let httpStr4a = process.env.SERVER_URL_4A
            axios.post(httpStr4a + '/account', this.getAccountsBody, {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }).then((res) => {
              this.editLeftTableData = res.data.datas
              for (let z = 0; z < this.editRightTableData.length; z++) {
                for (let x = 0; x < this.editLeftTableData.length; x++) {
                  if (this.editLeftTableData[x].account === this.editRightTableData[z].account) {
                    this.editLeftTableData.splice(x, 1)
                  }
                }
              }
            })
              .catch((error) => {
                console.log(error)
              })
          })
            .catch(function(error) {
              console.log(error)
            })
        } else {
          this.lookSendingBody.id = row.id
          let httpStr = process.env.SERVER_URL_ALARM_SERVICE
          axios.post(httpStr + '/strategy', this.lookSendingBody, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            console.log(res.data.data)
            this.editRightTableData = res.data.data.users
            for (let i = 0; i < this.editRightTableData.length; i++) {
              this.editRightTableData[i].account = this.editRightTableData[i].pid
            }
            this.lookSendingBody.id = ''
            this.realTimePage = false
            this.editRealTimePage = true
            this.timingPage = false
            this.sendingPage = false
            this.editRealTimeData = res.data.data
            this.$refs.editTree.setCheckedKeys(res.data.data.equip_value)
            let httpStr4a = process.env.SERVER_URL_4A
            axios.post(httpStr4a + '/account', this.getAccountsBody, {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }).then((res) => {
              this.editLeftTableData = res.data.datas
              for (let z = 0; z < this.editRightTableData.length; z++) {
                for (let x = 0; x < this.editLeftTableData.length; x++) {
                  if (this.editLeftTableData[x].account === this.editRightTableData[z].account) {
                    this.editLeftTableData.splice(x, 1)
                  }
                }
              }
            })
              .catch((error) => {
                console.log(error)
              })
          })
            .catch(function(error) {
              console.log(error)
            })
        }
      },
      // 增加一个时间点
      timingAddTime() {
        if (this.editTimingSafeTime.length < 8) {
          this.editTimingSafeTime.push('')
        }
      },
      // 减少一个时间点
      timingDeleteRow(index) {
        if (this.editTimingSafeTime.length > 1) {
          this.editTimingSafeTime.splice(index, 1)
        }
      },
      // 定时策略步骤条 下一步
      timingNext() {
        if (this.timingStep++ > 2) {
          this.timingStep = 1
        }
      },
      // 定时策略步骤条 上一步
      timingLast() {
        if (this.timingStep-- < 2) {
          this.timingStep = 1
        }
        if (this.timingStep === 1 && this.editTimingNeedTree) {
          this.$nextTick(function() {
            this.$refs.tree.setCheckedKeys(this.editTimingNeedTree)
          })
        }
      },
      // 定时策略编辑完成
      editTimingComplete() {
        this.editStrategyBody.data.id = this.editTimingData.id
        this.editStrategyBody.data.name = this.editTimingData.name
        this.editStrategyBody.data.type = 1
        this.editStrategyBody.data.equip_value = this.editTimingNeedTree
        this.editStrategyBody.data.timing_value = this.editTimingSafeTime
        this.editStrategyBody.data.users = this.editRightTableData
        for (let c = 0; c < this.editStrategyBody.data.users.length; c++) {
          this.editStrategyBody.data.users[c].pid = this.editStrategyBody.data.users[c].account
        }
        this.editStrategyBody.data.status = this.editTimingData.status
        let httpStr = process.env.SERVER_URL_ALARM_SERVICE
        axios.post(httpStr + '/strategy', this.editStrategyBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          console.log(res)
          this.active = 1
          this.editTimingPage = false
          this.sendingPage = true
          this.overSendingStrategy()
        })
          .catch((error) => {
            this.$message.error(error.data.errmsg)
            switch (error.data.errmsg) {
              case ' Name is not empty':
                this.$message.error('策略名称不能为空')
                break
              case 'name already exists':
                this.$message.error('当前策略名称已存在')
                break
              case 'Please select the event source.\t':
                this.$message.error('请选择事件源')
                break
              case 'Please select the user.\t':
                this.$message.error('请选择接收人')
                break
              case ' event level is not empty':
                this.$message.error('请选择发送级别')
                break
            }
          })
      },
      // 编辑定时策略返回
      returntimming() {
        this.timingStep = 1
        this.editTimingPage = false
        this.sendingPage = true
      },
      editTimingNodeClick() {
        this.editTimingNeedTree = this.$refs.tree.getCheckedKeys()
      },
      // 实时编辑操作
      editRealTime() {
        this.editStrategyBody.data.id = this.editRealTimeData.id
        this.editStrategyBody.data.name = this.editRealTimeData.name
        this.editStrategyBody.data.type = 0
        this.editStrategyBody.data.equip_value = this.editRealTimeData.equip_value
        this.editStrategyBody.data.event_level_value = this.editRealTimeData.event_level_value
        this.editStrategyBody.data.users = this.editRightTableData
        for (let c = 0; c < this.editStrategyBody.data.users.length; c++) {
          this.editStrategyBody.data.users[c].pid = this.editStrategyBody.data.users[c].account
        }
        this.editStrategyBody.data.status = this.editRealTimeData.status
        let httpStr = process.env.SERVER_URL_ALARM_SERVICE
        axios.post(httpStr + '/strategy', this.editStrategyBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          console.log(res)
          this.active = 1
          this.realTimePage = false
          this.editRealTimePage = false
          this.timingPage = false
          this.sendingPage = true
          this.overSendingStrategy()
        })
          .catch((error) => {
            this.$message.error(error.data.errmsg)
            switch (error.data.errmsg) {
              case ' Name is not empty':
                this.$message.error('策略名称不能为空')
                break
              case 'name already exists':
                this.$message.error('当前策略名称已存在')
                break
              case 'Please select the event source.\t':
                this.$message.error('请选择事件源')
                break
              case 'Please select the user.\t':
                this.$message.error('请选择接收人')
                break
              case ' event level is not empty':
                this.$message.error('请选择发送级别')
                break
            }
          })
      },
      // 单个删除弹框
      deleteSendingDialog(index, row) {
        this.deleteStrategyBody.ids.push(row.id)
        this.$confirm('确认删除发送策略？', '提示', {
          cancelButtonClass: 'userCancel',
          confirmButtonClass: 'userConfirm',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteSendingDo()
        }).catch(() => {
        })
      },
      // 单个删除操作
      deleteSendingDo() {
        let httpStr = process.env.SERVER_URL_ALARM_SERVICE
        axios.post(httpStr + '/strategy', this.deleteStrategyBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.deleteStrategyBody.ids = []
          this.overStrategy.data.page.page_number = '1'
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.overSendingStrategy()
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 获取多个删除ID
      sendingChangeFun(val) {
        this.deleteStrategys = []
        for (let d = 0; d < val.length; d++) {
          this.deleteStrategys.push(val[d].id)
        }
        console.log(this.deleteStrategys)
      },
      // 步骤条
      next() {
        if (this.active++ > 2) this.active = 0
      },
      previous() {
        if (this.active-- < 1) this.active = 0
        if (this.active === 1 && this.realTimeNeedTree) {
          this.$nextTick(function() {
            this.$refs.treee.setCheckedKeys(this.realTimeNeedTree)
          })
        }
        if (this.active === 1 && this.editRealTimeData.equip_value) {
          this.$nextTick(function() {
            this.$refs.editTree.setCheckedKeys(this.editRealTimeData.equip_value)
          })
        }
      },
      rightChangeFun(val) {
        this.rightNeedData = val
      },
      leftChangeFun(val) {
        this.leftNeedData = val
      },
      rightToLeft() {
        for (let i = 0; i < this.rightNeedData.length; i++) {
          this.leftTableData.push(this.rightNeedData[i])
          for (let x = 0; x < this.rightTableData.length; x++) {
            if (this.rightNeedData[i].account === this.rightTableData[x].account) {
              this.rightTableData.splice(x, 1)
            }
          }
        }
      },
      leftToRight() {
        for (let i = 0; i < this.leftNeedData.length; i++) {
          this.rightTableData.push(this.leftNeedData[i])
          for (let x = 0; x < this.leftTableData.length; x++) {
            if (this.leftNeedData[i].account === this.leftTableData[x].account) {
              this.leftTableData.splice(x, 1)
            }
          }
        }
      },
      editLeftChangeFun(val) {
        this.editLeftNeedData = val
      },
      editRightChangeFun(val) {
        this.editRightNeedData = val
      },
      editRightToLeft() {
        for (let i = 0; i < this.editRightNeedData.length; i++) {
          this.editLeftTableData.push(this.editRightNeedData[i])
          for (let x = 0; x < this.editRightTableData.length; x++) {
            if (this.editRightNeedData[i].account === this.editRightTableData[x].account) {
              this.editRightTableData.splice(x, 1)
            }
          }
        }
      },
      editLeftToRight() {
        for (let i = 0; i < this.editLeftNeedData.length; i++) {
          this.editRightTableData.push(this.editLeftNeedData[i])
          for (let x = 0; x < this.editLeftTableData.length; x++) {
            if (this.editLeftNeedData[i].account === this.editLeftTableData[x].account) {
              this.editLeftTableData.splice(x, 1)
            }
          }
        }
      },
      // 页数条数
      leftSizeChange(val) {
        console.log(`每页 ${val} 条`)
      },
      leftCurrentChange(val) {
        console.log(`当前页: ${val}`)
      },
      rightSizeChange(val) {
        console.log(`每页 ${val} 条`)
      },
      rightCurrentChange(val) {
        console.log(`当前页: ${val}`)
      },
      dialogOpenE(index, row) {
        this.dialogEnable = true
        this.strategyEnable.ids.push(row.id)
      },
      // 启用
      showEnable() {
        let httpStr = process.env.SERVER_URL_ALARM_SERVICE
        axios.post(httpStr + '/strategy', this.strategyEnable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.strategyEnable.ids = []
          this.overSendingStrategy()
          this.dialogEnable = false
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 禁用弹窗
      dialogOpenD(index, row) {
        this.dialogDisable = true
        this.strategyDisable.ids.push(row.id)
      },
      // 禁用
      showDisable() {
        let httpStr = process.env.SERVER_URL_ALARM_SERVICE
        axios.post(httpStr + '/strategy', this.strategyDisable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.strategyDisable.ids = []
          this.overSendingStrategy()
          this.dialogDisable = false
        })
          .catch(function(error) {
            console.log(error)
          })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .editTimingStrategy {
    border: 1px solid #E1E1E1;
    background-color: white;
    .timingHeader {
      .timingDialog {
        border-bottom: 1px solid #e0e0e0;
        background: #ffffff;
        .timingTitle {
          font-size: 14px;
          font-weight: bold;
          color: #323842;
          margin: 20px;
        }
        .timingButton {
          float: right;
          border: none;
          background: #ffffff;
          color: #0072F3;
        }
      }
      .policySpan {
        position: relative;
        top: 8px;
        margin-left: 20px;
        font-size:18px;
        color:#E53D41;
      }
      .policyLabel {
        font-size: 14px;
        font-weight: normal;
        color: #69727E;
        height: 30px;
        margin-bottom: 0px;
        margin: 10px 0;
        line-height: 30px;
        /deep/ .el-form-item__label {
          height: 30px;
          line-height: 30px;
        }
        /deep/ .el-form-item__content {
          height: 30px;
          line-height: 30px;
          vertical-align: middle;
          .policyInput {
            height: 30px;
          }
          /deep/ .policyInput > .el-input__inner {
            height: 30px;
            width: 680px;
          }
        }
      }
      .timingSteps {
        height: 40px;
        padding: 5px;
        .el-step.is-simple .el-step__head {
          height: 30px;
        }
      }
    }
    .timingBody {
      height: 450px;
      overflow: auto;
      border-bottom: 1px solid #E1E1E1;
      .timingTree {
        padding: 20px;
      }
      .timingTable {
        /deep/ .el-table__header-wrapper {
          height: 0px;
        }
        .timeInput {
          width: 285px;
          /deep/ .el-input__inner {
            height: 30px;
          }
          /deep/ .el-input__icon {
            line-height: 30px;
          }
        }
        .tableIcon {
          padding: 0px;
          font-size: 20px;
          font-weight: 500;
          color: #0072F3;
          margin-left: 0px;
        }
        .el-icon-minus {
          color: #D05133;
        }
      }
      .tableTransfer {
        .transferLeft {
          .leftTableTop {
            padding: 20px 20px 10px 20px;
            height: 70px;
            line-height: 30px;
            span {
              color: #323842;
              font-weight: bold;
              font-size: 14px;
              height: 30px;
            }
            .searchBox {
              float: right;
              height: 30px;
              line-height: 30px;
              .leftInput {
                height: 30px;
                line-height: 30px;
                width: 200px;
                /deep/ .el-input__inner {
                  height: 30px;
                }
              }
              .search {
                position: absolute;
                top: 29px;
                margin-left: -24px;
                cursor: pointer;
                font-size: 14px;
              }
            }
          }
          .leftTable {
            border: 1px solid #E1E1E1;
            margin: 0px 20px;
            /deep/ .el-table--fit {
              max-height: 330px;
            }
            /deep/ .el-table::before {
              height: 0px;
            }
          }
          .block {
            float: right;
            margin-top: 10px;
            margin-right: 20px;
          }
        }
        .transferMiddle {
          padding-top: 150px;
          padding-left: 1%;
          .el-button {
            width: 95px;
            height: 30px;
            padding: 8px 12px;
          }
          .el-button + .el-button {
            margin-left: 0px;
          }
        }
        .transferRight {
          .rightTableTop {
            padding: 20px 20px 10px 20px;
            height: 70px;
            line-height: 30px;
            span {
              color: #323842;
              font-weight: bold;
              font-size: 14px;
              height: 30px;
            }
            .searchBox {
              float: right;
              height: 30px;
              line-height: 30px;
              .leftInput {
                height: 30px;
                line-height: 30px;
                width: 200px;
                /deep/ .el-input__inner {
                  height: 30px;
                }
              }
              .search {
                position: absolute;
                top: 29px;
                margin-left: -24px;
                cursor: pointer;
                font-size: 14px;
              }
            }
          }
          .rightTable {
            border: 1px solid #E1E1E1;
            margin: 0px 20px;
            /deep/ .el-table--fit {
              max-height: 330px;
            }
            /deep/ .el-table::before {
              height: 0px;
            }
          }
          .block {
            float: right;
            margin-top: 10px;
            margin-right: 20px;
          }
        }
      }
    }
    .timingFooter {
      padding: 10px 20px;
      height: 50px;
      .footerBtn{
        .el-button {
          float: right;
          width: 80px;
          height: 30px;
          padding: 8px 12px;
          margin-left: 10px;
        }
      }
    }
  }
  .sending-containner{
    width: 100%;
    .safeSearch{
      width: 100%;
      height: 50px;
    }
    .safeTableList{
      width: 100%;
      background-color: white;
      height: 500px;
    }
    .footerPage{
      float: right;
      right:20px;
      padding: 5px 0px;
      position: relative;
    }
    .tableIcon {
      padding: 0px;
      font-size: 20px;
      font-weight: 500;
      color: #0072F3;
      margin-left: 0px;
    }
    .segmentingLine {
      font-size: 20px;
    }
    /deep/ .el-tag {
      background-color: transparent;
      border: none;
    }
    /deep/ .el-tag--success {
      background-color: transparent;
      color: #E53D41;
    }
    /deep/ .delete {
      display: inline;
      margin-left: 5px;
    }
    /deep/ .el-icon-delete{
      padding: 0;
      font-weight: 700;
      font-size: 20px;
      color: #d97159;
    }
    /deep/ .el-icon-delete:hover{
      color: #d97159;
    }
    /deep/ .el-icon-delete:focus{
      color: #d97159;
    }
    /deep/ .el-dialog {
      border-radius: 5px;
    }
    /deep/ .el-dialog__header {
      background: #E3E6EE;
      font-size: 18px;
      font-weight: bold;
      padding: 12px 20px 9px 20px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      line-height: 20px;
    }
    /deep/ .el-dialog__headerbtn {
      top: 15px;
    }
    /deep/ .el-dialog__body {
      padding: 20px;
    }
    /deep/ .sendingDisableDialog > .el-dialog > .el-dialog__body {
      text-align: center;
      font-size: 18px;
      height: 180px;
      border-bottom: 1px solid #e8eaf1;
    }
    /deep/ .sendingDisableDialog > .el-dialog > .el-dialog__footer {
      height: 60px;
    }
    /deep/ .sendingDisableDialog > .el-dialog > .el-dialog__footer > .dialog-footer > button {
      height: 30px;
      font-size: 14px;
      padding: 6px 16px;
    }
    /deep/ .clears{
      padding: 6px 16px;
      background-color: #526D89;
      border-color: #526D89 ;
      color: #fff;
      float: right;
      margin-left: 10px;
    }
    /deep/ .el-textarea__inner {
      resize: none;
    }
    /deep/ .el-table::before {
      height: 0px;
    }
    /deep/ .el-table td {
      padding: 3px 0px;
    }
    /deep/ .enableColor  > .el-input__inner {
      color: #0072F3;
    }
    /deep/ .disabledColor  > .el-input__inner {
      color: #E53D41;
    }
    /deep/ .relation {
      padding: 0px;
      font-size: 20px;
      font-weight: 500;
      color: #0072F3;
    }
    /deep/ .lookLabel > label {
      font-weight: normal;
    }
    /deep/ .lookInput > .el-input__inner {
      height: 30px;
      border: none;
    }
    /deep/ .el-textarea__inner {
      border: none;
    }
    /deep/ .el-form-item {
      margin-bottom: 10px;
    }
    /deep/ img {
      vertical-align: middle;
      margin-bottom: 3px;
    }
    /deep/ [class*=" el-icon-"], [class^=el-icon-] {
      font-weight: 700;
    }
    /deep/ .el-tree {
      background: #EAEDF1;
      padding: 10px;
    }

    /deep/ .el-dialog {
      width: 800px;
    }
  }
  /***************清除浮动******************/
  .clearfix:after{
    content: '';
    display: block;
    clear: both;
  }
  /************新增实时策略头部*************/
  .realTimePage{
    min-width: 1660px;
    height: 640px;
    border: 1px solid #E8E8E8;
    background-color: white;
  }
  .pageHeader{
    width: inherit;
    height: 130px;
  }
  .pageHeader > .headerTitle{
    height: 38px;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
  }
  .pageHeader > .headerTitle > h3{
    display: inline-block;
    float: left;
    width:84px;
    line-height:38px;
    margin: 0 20px;
    font-size:14px;
    font-weight:bold;
    color: #323842;
  }
  .pageHeader > .headerTitle > .returnSending{
    display: inline-block;
    float: right;
    width: 100px;
    cursor: pointer;
    line-height: 38px;
    font-size:14px;
    font-weight:400;
    color:#0072F3;
  }
  /**********输入框**********/
  .pageHeader > .headerInput{
    color: #69727E;
  }
  .pageHeader > .headerInput{
    position: relative;
    top: 5px;
    font-size:14px;
    color: #69727E;
    height: 30px;
  }
  .pageHeader > .headerInput > i{
    position: relative;
    top: 2px;
    margin: 0 5px 0 20px;
    font-size:18px;
    color:#E53D41;
  }
  /deep/ .headerInput > .el-input{
    position: absolute !important;
  }
  /deep/ .pageHeader > .headerInput > .el-input > .el-input__inner{
    width: 680px;
    height: 30px;
  }
  /************步骤条***********/
  /deep/ .pageHeader > .headerSteps{
    margin-top: 10px;
    height: 40px;
    background-color: #F0F3F5;
  }
  /deep/ .el-steps--simple{
    margin-top: 0 !important;
    padding: 10px 8%;
    background: #E6F0F2;
  }
  /deep/ .el-step__icon{
    display: none;
  }
  /deep/ .el-step__head{
    display: none;
  }
  /************新增实时策略内容*************/
  .pageContent{
    overflow: auto;
    height: 468px;
    border-bottom: 1px solid #E8E8E8;
  }
  /************新增实时策略树内容*************/
  .pageContent > .contentTree{
    margin: 20px;
  }
  /**************新增实时策略穿梭框内容***************/
  .pageContent > .contentTransfer{
    width: 1620px;
    height: 435px;
    margin: 15px 24px;
  }
  /deep/ .el-transfer-panel{
    width: 740px;
    height: 433px;
  }
  /deep/ .el-transfer__button{
    width: 80px;
    height: 30px;
    border-radius: 0%;
    background-color: #0072F3;
    color: #fff;
  }
  /deep/ .el-transfer-panel__list {
    height: 350px;
  }
  /************新增实时策略底部*************/
  /deep/ .pageFooter > .footerBtn > .el-button{
    float: right;
    width: 80px;
    height: 30px;
    margin: 5px 8px 0 0;
    padding: 8px 12px;
  }
  /deep/ .pageFooter > .footerBtnSecond > .el-button{
    float: right;
    width: 80px;
    height: 30px;
    margin: 5px 8px 0 0;
    padding: 8px 12px;
  }
  .tableTransfer {
    .transferLeft {
      .leftTableTop {
        padding: 20px 20px 10px 20px;
        height: 70px;
        line-height: 30px;
        span {
          color: #323842;
          font-weight: bold;
          font-size: 14px;
          height: 30px;
        }
        .searchBox {
          float: right;
          height: 30px;
          line-height: 30px;
          .leftInput {
            height: 30px;
            line-height: 30px;
            width: 200px;
            /deep/ .el-input__inner {
              height: 30px;
            }
          }
          .search {
            position: absolute;
            top: 29px;
            margin-left: -24px;
            cursor: pointer;
            font-size: 14px;
          }
        }
      }
      .leftTable {
        border: 1px solid #E1E1E1;
        margin: 0px 20px;
        /deep/ .el-table--fit {
          max-height: 330px;
          overflow-y: auto;
        }
        /deep/ .el-table::before {
          height: 0px;
        }
      }
      .block {
        float: right;
        margin-top: 10px;
        margin-right: 20px;
      }
    }
    .transferMiddle {
      padding-top: 150px;
      padding-left: 1%;
      .el-button {
        width: 95px;
        height: 30px;
        padding: 8px 12px;
      }
      .el-button + .el-button {
        margin-left: 0px;
      }
    }
    .transferRight {
      .rightTableTop {
        padding: 20px 20px 10px 20px;
        height: 70px;
        line-height: 30px;
        span {
          color: #323842;
          font-weight: bold;
          font-size: 14px;
          height: 30px;
        }
        .searchBox {
          float: right;
          height: 30px;
          line-height: 30px;
          .leftInput {
            height: 30px;
            line-height: 30px;
            width: 200px;
            /deep/ .el-input__inner {
              height: 30px;
            }
          }
          .search {
            position: absolute;
            top: 29px;
            margin-left: -24px;
            cursor: pointer;
            font-size: 14px;
          }
        }
      }
      .rightTable {
        border: 1px solid #E1E1E1;
        margin: 0px 20px;
        /deep/ .el-table--fit {
          max-height: 330px;
          overflow-y: auto;
        }
        /deep/ .el-table::before {
          height: 0px;
        }
      }
      .block {
        float: right;
        margin-top: 10px;
        margin-right: 20px;
      }
    }
  }
</style>
